<template>
  <div class="general-container">
    <div class="container-item">
      <h3>{{ $t('preferences.common') }}</h3>
      <div>
        <div class="toggle-container">
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.language') }}</span>
            <!-- <el-select v-model="value" size="small">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
            <language-switcher is-preferences></language-switcher>
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.dynamic-title') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.watermark') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.auto-check-update') }}</span>
            <el-switch v-model="value1" />
          </div>
        </div>
      </div>
    </div>
    <div class="container-item">
      <h3>{{ $t('preferences.animation') }}</h3>
      <div>
        <div class="toggle-container">
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.page-switch-progress-bar') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.page-switch-loading') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div class="toggle-item display-flex flex-justify-between flex-align">
            <span>{{ $t('preferences.page-switch-animation') }}</span>
            <el-switch v-model="value1" />
          </div>
          <div
            class="page-animation display-flex flex-align flex-justify-between"
          >
            <div class="page-animation-item outline is-active">
              <div class="animation-content page-fade-loop"></div>
            </div>
            <div class="page-animation-item outline">
              <div class="animation-content page-fade-slide"></div>
            </div>
            <div class="page-animation-item outline">
              <div class="animation-content page-fade-up"></div>
            </div>
            <div class="page-animation-item outline">
              <div class="animation-content page-fade-down"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LanguageSwitcher from './components/language-switcher/index.vue'

const value1 = ref(false)

defineOptions({
  name: 'CorePreferencesGeneral'
})
</script>

<style scoped lang="scss">
.general-container {
  .page-animation {
    padding: 0 8px;
    margin: 12px 0 8px;

    .page-animation-item {
      padding: 8px;

      .animation-content {
        width: 48px;
        height: 40px;
        background-color: red;
        border-radius: inherit;
      }

      .page-fade-loop {
        animation: page-fade-loop 3s infinite;
      }

      .page-fade-slide {
        animation: page-fade-slide 3s infinite;
      }

      .page-fade-up {
        animation: page-fade-up 3s infinite;
      }

      .page-fade-down {
        animation: page-fade-down 3s infinite;
      }
    }
  }
}
</style>
